import { Link, Route, Switch } from "react-router-dom"
import AboutGs from "./AboutGs"
import AboutWh from "./AboutWh"
import AboutZd from "./AboutZd"

const About = () => {

  return (
    <div>
      <h1>ABout组件：</h1>
      <div style={{ float: "left", width: '20%', height: '300px', borderRight: '1px solid gray', boxSizing: 'border-box' }}>
        <ul>
          <li>
            <Link to='/about/gs'>关于公司</Link>
          </li>
          <li>
            <Link to='/about/wh'>公司文化</Link>
          </li><li>
            <Link to='/about/zd'>公司制度</Link>
          </li>
        </ul>
      </div>
      <div style={{ float: "left", width: '80%', height: '300px', backgroundColor: 'gray' }}>
        {/* 配置2级路由 */}
        {/* <Switch> */}
        {/* 默认路由 */}
        <Route path="/about" exact component={AboutGs}></Route>
        {/* 2接路由 */}
        <Route path="/about/gs" exact component={AboutGs}></Route>
        <Route path="/about/wh" exact component={AboutWh}></Route>
        <Route path="/about/zd" exact component={AboutZd}></Route>
        {/* </Switch> */}
      </div>
    </div>
  )
}

export default About;